ヒートマップ

【Tips】ヒートマップ機能について①~クリック・スクロール編~

今回はMouseflowのメイン機能であるヒートマップについて、改めて機能をご紹介するとともにその効果的な活用方法についてもお話したいと思います。
Mouseflowのヒートマップには、以下の4つの種類があります。

  1. クリック
  2. ムーブメント
  3. スクロール
  4. アテンション

今回はこの中の「クリック」と「スクロール」についてご紹介します。

・クリックヒートマップ

これはページ内のどの部分がクリックされているかをサーモグラフィー状に表示するヒートマップです。

ページ内のボタンがそれぞれどれぐらいクリックされているか、ユーザが最も関心がある、あるいは頻繁に使用しているコンテンツは何かを確認できるだけでなく、クリックできない箇所や意外なコンテンツがクリックされていたりなど、ユーザの予期せぬ行動を検知することもできます。

・スクロールヒートマップ

ユーザがページのどこまでスクロールしているかを可視化するヒートマップです。

一般的に、ページを下にスクロールするにつれてユーザの関心は減少していきます。
スクロールヒートマップではページの重要なコンテンツ部分までどれだけのユーザがスクロールしているのか表示されるだけでなく、平均的なページの折り目部分、つまりロード時にページが途切れる場所も表示されます。
そのため、各デバイスタイプごとに確認することが重要です。

この2種類のヒートマップはそれぞれを単体で確認するのではなく、2つを掛け合わせることでより効果的なUXの検証を行うことができます。
クリックヒートマップとスクロールヒートマップは、ともにユーザの【行動】を示しています。
そのため、クリック率の高い場所とスクロール率の高い範囲が一致している状態が最適と考えられます。
つまり、多くのユーザにクリックされている場所はスクロール率の高い範囲に収まっていて、且つどのデバイスタイプでもページの折り目より上に配置されていなければなりません。

例として、弊社Webサイトを見てみましょう。

ヘッダーだけでなく、フッターのカテゴリー一覧の中でも「会社概要」が非常に多くクリックされています。
また採用ページへのリンクも、ページ最下部にありながら比較的クリック率が高いようです。
しかし、スクロール率で見るとページ最下部までは全体の10%しか到達していません。
このことから、弊社Webサイトのトップページを訪問したユーザの関心は「会社概要」と「採用情報」であり、この2つは近い場所に配置したほうがよいこと、そして採用コンテンツはもっとページ上部に配置してもいいのではないか?というアイデアが浮かびます。

みなさんもぜひ、ご自身のWebサイトで試してみてください!新たな視点が生まれるかもしれません。
次回はムーブメントとアテンションについてご紹介します。

Databricks: Spark DataFramesをJDBCから作成する前のページ

Adobe Analytics:計算指標でevents変数を後付けでパーティシペーションにする次のページ

ピックアップ記事

  1. 最速で理解したい人のためのIT用語集

関連記事

  1. ヒートマップ

    MouseflowをAdobe Analyticsと一緒に使う

    近年、視覚分析ツールの需要が高まっています。ウェブサイトの統計的なロ…

  2. ヒートマップ

    Mouseflowの新機能:ライブヒートマップで動的なヒートマップ分析が可能に!

    mouseflowのヒートマップに新機能が追加されました!その名も「…

  3. Mouseflow

    mouseflow の フリクションイベント って何?

    Webサイトの訪問者は、様々な理由でコンバージョン[閲覧者による収益…

  4. ヒートマップ

    ヒートマップとは

    Mouseflowのメイン機能の一つであるヒートマップについてご紹介し…

  5. ヒートマップ

    スクロール・ヒートマップ

    これまで紹介したクリック・ヒートマップやムーブメント・ヒートマップでは…

  6. ヒートマップ

    【Tips】ヒートマップ機能について②~ムーブメント、アテンション編~

    前回に引き続き、Mouseflowのメイン機能であるヒートマップについ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


カテゴリ
最近の記事
  1. dbt Fusion使ってみた
  2. Manusを使ってみたうえでManusに感想ブログを書かせて…
  3. SquadbaseとStreamlitでお手軽アプリ開発
  4. [Snowflake Summit 2025] Snowfl…
  5. [Snowflake新機能]AI_AGGを試してみた
  1. Tableau

    【TC19ブログ】セッション紹介:DataRobot×TableauでAIを民主…
  2. IT用語集

    ドキュメント(Document)って何?
  3. ブログ

    エクセル関数の基礎
  4. 赤の女王

    データサイエンス

    進化学に倣う最適化手法「遺伝的アルゴリズム」
  5. Adobe Analytics

    Adobe AnaltyicsとGoogle Analytics の「生Webビ…
PAGE TOP